<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>线性渐变</title>
    <style>
        /*
        CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
        分为线性渐变(linear-gradient)、径向渐变(radial-gradient)
        为了创建一个线性渐变，必须至少定义两种颜色。这个颜色就是你想呈现的平稳过渡的颜色，同时也可以设置一个起点和一个方向（或一个角度）。
        语法：background:linear-gradient(direction,color1,color2……)
        */
        .box{
            width:100%;
            height:2px;
            background: -webkit-linear-gradient(left, #fff 0%, #2473fb 50%, #fff 100%);
            background: -o-linear-gradient(left, #fff 0%, #2473fb 50%, #fff 100%);
            background: linear-gradient(to right, #fff 0%, #2473fb 50%, #fff 100%);
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
